<template>
    <div class="comment-item" v-for="(item, index) in commentList" :key="index">
        <!--头像和昵称-->
        <div class="comment-user">
            <common-avatar :url="item.avatar" :size="38" :iconsize="26"></common-avatar>
            <div class="user-name">
                <span>{{ item.name }}</span>
            </div>
            <n-time class="comment-time" type="relative" :time="new Date(item.created_at)"></n-time>
        </div>
        <!--评论内容-->
        <div class="comment-content">
            <div v-if="item.content.indexOf('@') === -1">
                <span>{{ item.content }}</span>
            </div>
            <div v-else>
                <div class="content-text" v-for="(content, c_key) in handleMention(item.content)" :key="c_key">
                    <span :class="content.class">{{ content.value }}</span>
                </div>
            </div>
        </div>
        <!--回复-->
        <div class="reply-list" v-if="item.reply">
            <div class="reply-item" v-for="(reply, i) in item.reply" :key="i">
                <!--头像和昵称-->
                <div class="reply-user">
                    <div class="info">
                        <common-avatar :url="reply.avatar" :size="26" :iconsize="12"></common-avatar>
                        <div class="reply-user-name">
                            <span>{{ reply.name }}</span>
                        </div>
                        <n-time class="reply-time" type="relative" :time="new Date(reply.created_at)"></n-time>
                    </div>
                </div>
                <!--二级评论内容-->
                <div class="reply-content">
                    <div v-if="reply.content.indexOf('@') === -1">
                        <span>{{ reply.content }}</span>
                    </div>
                    <div v-else>
                        <div class="content-text" v-for="(content, c_key) in handleMention(reply.content)" :key="c_key">
                            <span :class="content.class">{{ content.value }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="more">
                <n-button :disabled="item.noMore" text @click="getMoreReply(item.id, index)">加载更多</n-button>
            </div>
        </div>
    </div>
    <!-- 加载更多 -->
    <div v-if="!noMore" class="more-btn">
        <n-button @click="getMore">加载更多</n-button>
    </div>
</template>

<script lang="ts">
import useComment from '@/hooks/comment';
import useMention from '@/hooks/mention';
import { defineComponent, onBeforeMount, ref } from "vue";
import CommonAvatar from '@/components/CommonAvatar.vue';
import { NButton, NTime } from "naive-ui";

export default defineComponent({
    props: {
        vid: {
            type: Number,
            required: true
        }
    },
    setup(props) {

        //获取评论回复
        const page = ref(1);
        const replyCount = 2;//获取评论时查询的回复数
        const { noMore, commentList, getCommentList, getReplyListSync } = useComment();

        //加载更多回复
        const getMoreReply = (cid: number, index: number) => {
            const pageSize = 2;
            if (!commentList.value[index].page) {
                commentList.value[index].page = 1;
            }
            //获取回复内容
            getReplyListSync(cid, replyCount, commentList.value[index].page, pageSize).then((res) => {
                if (res === null) {
                    commentList.value[index].noMore = true;
                    return;
                }

                commentList.value[index].page += 1;
                (commentList.value[index].reply)?.push(...res);
            })
        }

        //加载更多
        const getMore = () => {
            page.value++;
            getCommentList(props.vid, replyCount, page.value, 8);
        }

        //处理@
        const { handleMention } = useMention();

        onBeforeMount(() => {
            getCommentList(props.vid, replyCount, page.value, 8);
        })

        return {
            noMore,
            commentList,
            getMore,
            getMoreReply,
            handleMention
        }
    },
    components: {
        NTime,
        NButton,
        CommonAvatar,
    }
});
</script>

<style lang="less" scoped>
.comment-item {
    margin-top: 10px;

    .comment-user {
        position: relative;
        padding-left: 12px;

        .user-name {
            position: absolute;
            top: 0;
            left: 60px;
            font-weight: 500;
            cursor: pointer;
            color: #6d757a;
            font-size: 14px;
        }

        .comment-time {
            position: absolute;
            color: #969996;
            top: 26px;
            left: 60px;
            font-size: 12px;
        }
    }

    .comment-content {
        margin: 6px 0 6px 60px;
        font-size: 14px;
        line-height: 16px;
        padding-bottom: 10px;
        border-bottom: 1px solid #e3e4e5;
    }
}


.reply-list {
    border-bottom: 1px solid #e3e4e5;

    .reply-item {
        .reply-user {
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-left: 60px;

            .info {
                display: inline-flex;
                align-items: center;

                .reply-user-name {
                    cursor: pointer;
                    color: #666;
                    font-size: 12px;
                    padding: 0 10px;
                }

                .reply-time {
                    color: #969996;
                    font-size: 10px;
                    line-height: 30px;
                }
            }
        }

        .reply-content {
            color: #222;
            display: block;
            margin: 6px 0 0 96px;
            padding-bottom: 10px;
        }
    }

    .more {
        button {
            font-size: 12px;
            color: #969996;
            margin: 10px 60px;

            &:hover {
                color: #36ad6a;
            }
        }
    }
}

.content-text {
    display: inline-block;

    .mention-user {
        color: #36ad6a;
        cursor: pointer;
        padding: 0 2px;
    }
}

.more-btn {
    text-align: center;
}
</style>